<template>
  <div class="home_main_view">
    <!-- 信息列表 -->
    <div class="hmv_list">
      <!-- 信息列表标题 和 搜索 -->
      <div class="hmv_list_header">
        <div class="hmv_list_header_title">
          信息列表 <br />
          <span>information list</span>
        </div>
        <div class="hmv_list_header_seach">
          <el-input placeholder="请输入搜索关键词" v-model="search">
            <img slot="prefix" src="../assets/image/搜索.png" />
          </el-input>
          <div class="hmv_lhs_search_btn" @click="jianSuo">检索</div>
          <!-- <div class="hmv_lhs_jingzhuntuisong" @click="tuiSong('')">
            精准推送
          </div> -->
        </div>
      </div>
      <!-- 列表内容 -->
      <el-scrollbar
        class="hmv_list_box"
        v-loading="tuiSongLoading"
        element-loading-text="数据推送中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.3)"
      >
        <div class="hmv_list_box_inner" v-infinite-scroll="infiniteLoad">
          <template v-for="(item, index) in tuiSongList">
            <!-- 循环列表 -->
            <div
              :key="item.id"
              class="hmv_list_item"
              @click="toDetails(item.id)"
            >
              <!-- 操作小点 -->
              <div class="operation" @mouseenter="item.myFlag = true">
                ...
              </div>
              <!-- 屏蔽标签遮罩层 -->
              <div
                class="operations"
                @mouseleave="handlerShieldNOT(index)"
                v-show="item.myFlag"
                @click.stop="clickNot"
              >
                <p>请选择不喜欢类别：</p>
                <div class="operations_tags">
                  <span
                    @click.stop="handlerShield(index, pub_index, pb_tag)"
                    v-for="(pb_tag, pub_index) in item.tags"
                    :key="'pb' + pb_tag"
                    :class="
                      activeTags.some((i) => i.tagName === pb_tag)
                        ? 'active'
                        : ''
                    "
                    >{{ pb_tag }}</span
                  >
                </div>
                <div class="operations_btns">
                  <div
                    class="operations_btn active"
                    @click="handlerShieldOK(index)"
                  >
                    确认
                  </div>
                  <div class="operations_btn" @click="handlerShieldNOT(index)">
                    取消
                  </div>
                </div>
              </div>
              <!-- 图片和标签 -->
              <div class="hmv_list_item_img">
                <img
                  v-if="!item.browserimgblob"
                  src="../assets/image/默认小图.jpg"
                  alt=""
                />
                <img v-else :src="item.browserimgblob" alt="" />
                <!-- 标签 -->
                <el-scrollbar class="biaoqian">
                  <span v-for="subItem in item.tags" :key="subItem">{{
                    subItem
                  }}</span>
                </el-scrollbar>
              </div>
              <div class="hmv_list_item_info">
                <span>产品级别:{{ item.productlevel }}</span>
                <span>分辨率:{{ item.imagegsd }}</span>
                <span
                  >中心经度:{{ item.centerlongitude.substring(0, 10) }}</span
                >
                <span>中心纬度:{{ item.centerlatitude.substring(0, 10) }}</span>
                <span>中心时间:{{ item.centertime }}</span>
              </div>
            </div>
          </template>
        </div>
      </el-scrollbar>
    </div>
    <!-- 信息排行 -->
    <div class="hmv_rank">
      <!-- 标题 -->
      <div class="hmv_rank_title">
        热点信息排行 <br />
        <span>Hotspot Information ranking</span>
      </div>
      <!-- 排行 -->
      <div class="hmv_rank_list">
        <div
          class="hrl_item"
          v-for="(item, index) in rankList"
          :key="'rank' + index + item.imgid"
          @click="toDetails(item.imgid)"
        >
          <img
            :src="require('@/assets/image/序号' + index + '.png')"
            :alt="index + 1"
          />
          {{ item.productid }}
        </div>
      </div>
      <!-- 最近查看 -->
      <div class="hmv_rank_lately_view">
        <!-- title -->
        <div class="hrlv_title">
          最近查看 <br />
          <span>Recent view</span>
        </div>
        <!-- list 无缝滚动-->
        <MyScroll :toDetails="toDetails" :viewList="viewList" />
      </div>
    </div>
  </div>
</template>

<script>
import MyScroll from "../components/MyScroll.vue";
import getData from "../api/home";
export default {
  name: "tuiSong",
  components: { MyScroll },
  data() {
    return {
      rankList: [],
      search: "",
      tuiSongList: [], //推荐列表
      tuiSongLoading: false,
      tuiSongPageNo: 0,
      tuiSongPageSize: 10,
      viewList: [], //历史浏览
      isOperations: false,
      activeTags: [],
    };
  },
  computed: {
    isReGetTuisong() {
      return this.$store.state.isReGetTuisong;
    },
  },
  watch: {
    isReGetTuisong(newValue) {
      if (newValue) {
        this.reTuiSong();
      }
    },
  },
  mounted() {
    // 最近查看
    const userid = this.$store.state.userInfo.userid;
    getData.getRecentView(userid).then((res) => {
      this.viewList = res.data.list;
    });
    // 热度排行
    getData.selectHotInfo().then((res) => {
      this.rankList = res.data;
    });
    // 精准推送
    // this.tuiSong();

    // webSocket 接受最新数据 window.VUE_APP_BASE_URL
    var ws = new WebSocket(`${window.VUE_APP_BASE_URL_WS}/websocket/${userid}`);
    ws.onopen = () => {
      console.log("WebSocket连接成功！");
      // ws.send("hello");
    };
    ws.onmessage = (e) => {
      let data = JSON.parse(e.data);
      // console.log(666, data);
      this.tuiSongList = [...data, ...this.tuiSongList];
      this.$nextTick(() => {
        this.$message({
          type: "success",
          message: "推送数据已更新！",
        });
      });
    };
  },
  methods: {
    // 忽略tag 点击
    handlerShield(index, pub_index, tag) {
      // 多选版
      console.log(index, pub_index, tag);
      if (!this.activeTags.some((name) => name === tag)) {
        this.activeTags.push({
          tagName: tag,
          tagType: pub_index + 1,
          userid: this.$store.state.userInfo.userid,
        });
      }
    },
    handlerShieldOK(index) {
      // 调取忽略标签接口
      if (this.activeTags.length > 0) {
        getData.addDislike(this.activeTags).then((res) => {
          if (res.code === 200) {
            // 假删数据
            this.tuiSongList.splice(index, 1);
          }
          // 提示
          this.$notify({
            type: res.code === 200 ? "success" : "error",
            title: res.msg,
            message:
              res.code === 200
                ? `将减少【 ${this.activeTags
                    .map((item) => {
                      return item.tagName;
                    })
                    .join("、")} 】相关内容推荐`
                : "请稍后重试",
            position: "top-left",
          });

          this.activeTags = [];
          this.reTuiSong();
        });
      } else {
        this.$notify.error("请先添加需要忽略的标签");
      }
    },
    handlerShieldNOT(index) {
      // 关闭遮罩层
      this.tuiSongList[index].myFlag = false;
      // 清空tag选中
      this.activeTags = [];
    },
    // 检索
    jianSuo() {
      // 检索先清空原数据
      this.tuiSongList = [];
      this.tuiSong();
    },
    // 精准推送
    tuiSong() {
      // 精准推送
      this.tuiSongLoading = true;
      const userid = this.$store.state.userInfo.userid;
      getData
        .getInterest(
          userid,
          this.search,
          this.tuiSongPageNo,
          this.tuiSongPageSize
        )
        .then((res) => {
          // console.log(res);
          let arr = [];
          arr = res.data.list.map((item) => {
            item.myFlag = false;
            return item;
          });
          this.tuiSongList = this.tuiSongList.concat(arr);
        })
        .finally(() => {
          this.tuiSongLoading = false;
        });
    },
    // 精准推送
    reTuiSong() {
      // 精准推送
      this.tuiSongLoading = true;
      const userid = this.$store.state.userInfo.userid;
      this.tuiSongPageNo = 1;
      getData
        .getInterest(
          userid,
          this.search,
          this.tuiSongPageNo,
          this.tuiSongPageSize
        )
        .then((res) => {
          // console.log(res);
          let arr = [];
          arr = res.data.list.map((item) => {
            item.myFlag = false;
            return item;
          });
          this.tuiSongList = arr;
          // 恢复触发状态
          this.$store.commit("operationIsReGetTuisong", false);
        })
        .finally(() => {
          this.tuiSongLoading = false;
        });
    },
    // 无限滚动
    infiniteLoad() {
      // console.log(999);
      this.tuiSongPageNo++;
      this.tuiSong();
    },
    // 跳转详情
    toDetails(id) {
      this.$router.push(`/details?id=${id}`);
    },
    // 阻止点击事件
    clickNot() {},
  },
};
</script>

<style lang="scss" scoped>
.text_box {
  max-height: 200px;
  width: 150px;
  overflow: auto;
  background-color: rgba(235, 166, 166, 0.295);
}
// 内容区域
.home_main_view {
  display: flex;
  // 信息列表
  .hmv_list {
    width: 1328px;
    height: 100%;
    // 信息列表头部
    .hmv_list_header {
      font-weight: bold;
      color: #2ed97a;
      display: flex;
      .hmv_list_header_title {
        padding-left: 50px;
        padding-top: 10px;
        width: 400px;
        height: 60px;
        background-image: url("../assets/image/组 6(13).png");
        background-size: 100% 100%;
        font-size: 24px;
        line-height: 22px;
        span {
          height: 9px;
          font-size: 10px;
          font-weight: 400;
          opacity: 0.4;
        }
      }
      // 搜索
      .hmv_list_header_seach {
        display: flex;
        .el-input {
          margin-left: 20px;
          padding-top: 10px;
          // width: 650px;
          width: 770px;
          height: 50px;
          font-size: 16px;
          color: #00ff72;
          ::v-deep .el-input__inner {
            padding-left: 50px;
            height: 50px;
            background: #00ffa020;
          }
        }
        ::v-deep .el-input__inner {
          border: none;
        }
        img {
          width: 20px;
          height: 20px;
          margin: 15px;
          margin-top: 25px;
        }
        .hmv_lhs_search_btn,
        .hmv_lhs_jingzhuntuisong {
          width: 100px;
          margin-top: 10px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          color: #0e2d32;
          background: #2fab7d;
          border-radius: 0px 2px 2px 0px;
          cursor: pointer;
        }
        .hmv_lhs_jingzhuntuisong {
          width: 120px;
          margin-left: 6px;
          border-radius: 2px;
        }
      }
    }
    .hmv_list_box {
      height: 860px;
      margin-top: 20px;
      width: calc(100% - 20px);
      // loading
      ::v-deep .el-loading-spinner .el-loading-text {
        font-size: 20px;
        color: #2ed97a;
      }
      ::v-deep .el-loading-spinner i {
        font-size: 40px;
        color: #2ed97a;
      }
      // loading
      .hmv_list_box_inner {
        display: flex;
        flex-wrap: wrap;
        .hmv_list_item {
          width: 400px;
          // height: 200px;
          min-height: 200px;
          background-image: url("../assets/image/组 6(10).png");
          background-size: 100% 100%;
          margin: 0 20px 20px 0;
          padding: 20px;
          cursor: pointer;
          position: relative;
          &:hover {
            background-image: url("../assets/image/组 6(11).png");
            .operation {
              display: block;
            }
          }
          // 操作小点
          .operation {
            position: absolute;
            right: 20px;
            bottom: 20px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 700;
            // border-radius: 50%;
            // background-color: rgba(255, 255, 255, 0.11);
            // transform: rotate(270deg);
          }
          // 悬浮操作
          .operations {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            background-image: url("../assets/image/遮盖.png");
            background-size: 100% 100%;
            overflow: hidden;
            padding: 30px;
            cursor: default;
            p {
              font-size: 18px;
              color: #2ed97a;
              margin-bottom: 5px;
            }
            // tags 盒子
            .operations_tags {
              height: calc(100% - 70px);
              span {
                display: inline-block;
                background: #155059;
                border-radius: 2px;
                font-size: 12px;
                color: #00d9f3;
                padding: 3px 8px;
                margin-right: 4px;
                margin-bottom: 4px;
                cursor: pointer;
              }
            }

            // 操作按钮
            .operations_btns {
              display: flex;
              .operations_btn {
                width: 60px;
                height: 30px;
                background: none;
                border: 1px solid #2fab7d;
                line-height: 30px;
                text-align: center;
                font-size: 14px;
                color: #baffe5;
                border-radius: 2px;
                cursor: pointer;
              }
              .operations_btn + .operations_btn {
                margin-left: 10px;
              }
            }

            .active {
              background: #065c43 !important;
              color: rgba(0, 0, 0, 0.801) !important;
            }
          }
          // 图片和标签
          .hmv_list_item_img {
            // 图片
            img {
              width: 190px;
              height: 119px;
            }

            // 标签样式
            .biaoqian {
              width: 160px;
              height: 120px;
              overflow-y: auto;
              float: right;
              span {
                display: inline-block;
                max-width: 160px;
                overflow: hidden;
                background: #155059;
                border-radius: 2px;
                font-size: 12px;
                color: #00d9f3;
                padding: 3px 8px;
                margin-right: 4px;
                margin-bottom: 4px;
              }
            }
            //变窄 竖向滚动条
            ::v-deep .el-scrollbar__bar.is-vertical {
              opacity: 0; //常显设置此此项
              width: 6px;
              background: #0e2d32;
              border-radius: 4px;
              border: 1px solid #2fab7d;
              padding: 2px 1px;
            }
            ::v-deep .el-scrollbar__thumb {
              width: 6px;
              background: rgb(47, 171, 125);
            }
          }
          .hmv_list_item_info {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            margin-top: 8px;
            justify-content: space-between;
            span {
              // width: 33%;
              min-width: 50%;
              font-size: 14px;
              font-weight: 400;
              color: #baffe5;
              line-height: 24px;
            }
            span:last-child {
              width: 100%;
            }
          }
        }
      }
    }
  }
  // 排行信息
  .hmv_rank {
    width: 510px;
    border-left: 1px solid #00ffa0;
    padding: 0 20px;

    .hmv_rank_title {
      color: #2ed97a;
      padding-left: 50px;
      padding-top: 10px;
      width: 400px;
      height: 60px;
      background-image: url("../assets/image/组 6(13).png");
      background-size: 100% 100%;
      font-size: 24px;
      line-height: 22px;
      span {
        height: 9px;
        font-size: 10px;
        font-weight: 400;
        opacity: 0.4;
      }
    }
    .hmv_rank_list {
      width: 480px;
      height: 560px;
      background-image: url("../assets/image/矩形 5.png");
      background-size: 100% 100%;
      margin-top: 20px;
      padding: 10px 27px;
      .hrl_item {
        font-size: 16px;
        color: #baffe5;
        line-height: 24px;
        padding: 18px 0;
        border-bottom: 1px solid #00ffa0;
        max-width: 420px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
      }
      .hrl_item:last-child {
        border: none;
      }
      img {
        width: 47px;
        height: 22px;
      }
    }
    .hmv_rank_lately_view {
      width: 480px;
      height: 280px;
      background-image: url("../assets/image/矩形 6.png");
      background-size: 100% 100%;
      color: #2ed97a;
      margin-top: 20px;
      padding: 10px 27px;
      .hrlv_title {
        width: 427px;
        height: 40px;
        background-image: url("../assets/image/组 6(13).png");
        background-size: 100% 100%;
        font-size: 14px;
        line-height: 16px;
        padding-left: 50px;
        padding-top: 6px;
        margin-bottom: 14px;
        span {
          height: 9px;
          font-size: 8px;
          font-weight: 400;
          opacity: 0.4;
        }
      }
    }
  }
}

// 滚动条样式 隐藏横向滚动条
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
  //隐藏自带的滚动条
  margin-right: -66px !important;
}
::v-deep .is-horizontal {
  display: none;
}
// 超宽 竖向滚动条
::v-deep .el-scrollbar__bar.is-vertical {
  opacity: 1; //常显设置此此项
  width: 30px;
  background: #0e2d32;
  border-radius: 14px;
  border: 1px solid #2fab7d;
  padding: 8px 6px;
}
::v-deep .el-scrollbar__thumb {
  width: 16px;
  background: rgb(47, 171, 125);
}
// 输入框文字提示
::v-deep .el-input input::-webkit-input-placeholder {
  color: #00ffa024;
}
::v-deep .el-input input::-moz-input-placeholder {
  color: #00ffa024;
}
::v-deep .el-input input::-ms-input-placeholder {
  color: #00ffa024;
}
</style>
